<script setup>
	import { onLoad, onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getColletList, removeCollet } from '@/api/user'
	import { useUserStore } from '@/store/user'
	
	const user = useUserStore()
	const loading = ref(false)
	const loadStatus = ref('loadmore')
	const query = ref({areaId: user.addressIds[2], current: 1, size: 20})
	const total = ref(0)
	const list = ref([])
	const refreshId = ref(null)
	
	function refreshList(stop = true) {
		if(loadStatus.value === 'loading') return
		loadStatus.value = 'loading'
		list.value = []
		query.value.current = 1
		getColletList(query.value).then(res => {
			let result = res.result || {}
			let data = result.records || []
			total.value = Number(result.total)
			list.value = data
			let curLength = list.value.length
			loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
			if(stop) uni.stopPullDownRefresh()
		}).catch(() => {
			loadStatus.value = 'nomore'
			if(stop) uni.stopPullDownRefresh()
		})
	}
	function lowerList(noReplace = true) {
		if(list.value.length < total.value || !noReplace) {
			loadStatus.value = 'loading'
			query.value.current ++
			getColletList(query.value).then(res => {
				let result = res.result || {}
				let data = result.records || []
				total.value = Number(result.total)
				if(noReplace) {
					list.value.push(...data)
				} else {
					const preList = list.value.slice(0, (query.value.current - 1) * query.value.size)
					list.value = preList.concat(data)
				}
				let curLength = list.value.length || 0
				loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
			}).catch(() => {
				query.value.current --
				loadStatus.value = 'loadmore'
			})
		}
	}
	function refreshItem(id) {
		let index = list.value.findIndex(item => item.goodsId === id)
		if(index != -1) {
			query.value.current = Math.floor(index / query.value.size)
			lowerList(false)
		}
	}
	function changeCollect(item) {
		loading.value = true
		removeCollet([item.goodsId]).then(res => {
			uni.showToast({
				icon: 'success',
				title: '取消收藏成功'
			})
			setTimeout(()=>{
				refreshItem(item.goodsId)
			}, 200)
		}).catch(() => loading.value = false)
	}
	function goView(item) {
		let url = `/pages/shop/goodsDetail?id=${item.goodsId}&title=${item.goodsVO.goodsName}`
		uni.navigateTo({
			url,
			success: () => {
				refreshId.value = item.goodsId
			}
		})
	}
	
	onReachBottom(() => {
		lowerList()
	})
	onPullDownRefresh(() => {
		refreshList()
	})
	onLoad(() => {
		refreshList(false)
	})
	onShow(() => {
		if(refreshId.value) {
			refreshItem(refreshId.value)
		}
	})
</script>

<template>
	<view class="app-container">
		<template v-if="list.length">
			<view class="content-list" >
				<view class="list-box" v-for="item in list" :key="item.goodsId" @click="goView(item)">
					<uv-image :src="item.goodsVO && item.goodsVO.images && item.goodsVO.images[0] && item.goodsVO.images[0].furl" width="336" height="336"></uv-image>
					<view class="bottom">
						<view class="name">{{item.goodsVO && item.goodsVO.goodsName || '--'}}</view>
						<view class="info" @click.stop>
							<view class="price">
								<text class="text-price">{{item.goodsVO && item.goodsVO.price? item.goodsVO.price.toFixed(2) : 0.00}}</text>
								<text class="text-unit" v-if="item.goodsVO && item.goodsVO.specs">/{{item.goodsVO.specs}}</text>
							</view>
							<uv-icon name="star-fill" color="#FA3F00" size="40" @click="changeCollect(item)" />
						</view>
					</view>
				</view>
			</view>
			<uv-load-more :status="loadStatus" fontSize="28" iconSize="34" marginTop="20" marginBottom="20" isDot line></uv-load-more>
		</template>
		<view class="empty-box" v-else>
			<empty text="没有找到你的商品收藏"></empty>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding: 24rpx;
		.content-list{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 24rpx 30rpx;
			.list-box{
				width: 336rpx;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				overflow: hidden;
				.bottom{
					padding: 12rpx 16rpx;
				}
				.name{
					margin-top: 12rpx;
					font-weight: 600;
				}
				.info{
					margin-top: 16rpx;
					display: flex;
					align-items: center;
					.price{
						flex: 1;
						font-size: var(--theme-lg);
						line-height: var(--theme-lg-line);
					}
					.text-price{
						color: #FF0D0D;
						font-weight: 600;
						&::before{
							content: "¥";
							font-size: 60%;
						}
					}
					.text-unit{
						font-size: var(--theme-sm);
						line-height: var(--theme-sm-line);
					}
				}
			}
		}
		.empty-box{
			padding: 24rpx;
			background-color: #FFFFFF;
			border-radius: 12rpx;
		}
	}
</style>